<template>
  <div>
    <van-sticky>
      <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <!-- 头像 -->
    <van-cell is-link>
      <van-row type="flex" justify="space-between">
        <van-col span="6">头像</van-col>
        <van-col span="3">
          <van-image round width="25px" @click="picShow = true" height="25px" :src="info.avatar" />
        </van-col>
      </van-row>
    </van-cell>
    <!-- 选择头像的弹出框 -->
    <van-popup v-model:picShow="picShow" round>
      <van-uploader :after-read="afterRead" :before-read="beforeRead" />
    </van-popup>
    <!-- ID -->
    <van-cell>
      <van-row type="flex" justify="space-between">
        <van-col span="6">ID</van-col>
        <van-col span="18" style="text-align: right">{{ info.userId }}</van-col>
      </van-row>
    </van-cell>
    <!-- 姓名 -->
    <van-cell-group>
      <van-field v-model="info.userName" label="姓名" input-align="right" />
    </van-cell-group>
    <!-- 生日 -->
    <van-cell is-link>
      <van-row type="flex" justify="space-between" @click="showPopFn()">
        <van-col span="3">生日</van-col>
        <van-col span="8">{{ info.birthday }}</van-col>
      </van-row>
    </van-cell>
    <!-- 选择年月日 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()"
        @cancel="cancelFn()" :min-date="minDate" :max-date="maxDate" />
    </van-popup>
    <van-button type="info" style="
        width: 90%;
        border-radius: 20px;
        position: absolute;
        bottom: 20px;
        left: 5%;" @click="updateInfo">保存
    </van-button>


  </div>
</template>
<script>
import { Toast } from "vant";

export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
      minDate: new Date(1970, 1, 1),
      maxDate: new Date(),
    };
  },

  data() {
    return {
      picShow: false, //选择图片的弹框默认不显示
      //用户信息
      info: {
        avatar: "", //头像路径
        userId: "", //用户id
        userName: "", //用户名
        sex: "2", //性别
        birthday: "", //生日
      },
      msg: "",
      currentDate: new Date(),
      changeDate: new Date(),
      show: false, // 用来显示弹出层
      showSex: false,
      timeValue: "",
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$http.get("vip/customer/getUserInfo").then((res => {
        if (res.data.code === 200) {
          this.info.userName = res.data.data.userName;
          this.info.avatar = res.data.data.avatar;
          this.info.userId = res.data.data.userId;
          this.info.sex = res.data.data.sex;
          this.info.birthday = res.data.data.birthday;
        }
      }));
    },
    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      //return year + "年" + month + "月" + day + "日";
      return year + "-" + month + "-" + day;
    },
    showPopFn() {
      this.show = true;
    },
    showSexFn() {
      this.showSex = true;
    },
    changeFn() {
      this.changeDate = this.currentDate; // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    confirmFn() {
      // 确定按钮
      this.info.birthday = this.timeFormat(this.currentDate);
      this.show = false;
    },
    cancelFn() {
      this.show = false;
    },
    afterRead(file) {
      console.log(file);
      // 将文件上传至服务器
      const forms = new FormData();
      forms.append("file", file.file); // 获取上传图片信息
      this.$http.post("/user/people/api/upload", forms, {
        headers: {
          "content-type": "multipart/form-data",
          token: this.token,
        },
      }).then((res) => {
        //如果传入的响应状态码为200，则成功将文件发送给后台
        if (res.data.code === 200) {
          this.info.avatar = res.data.data;
          this.picShow = false;
          this.$notify({ type: 'success', message: '图片上传成功' });
        } else {
          this.$notify({ type: 'danger', message: '图片上传失败' });
        }
      });
    },

    //上传图片之前判断图片是否符合条件
    beforeRead(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        Toast("请上传 jpg/png 格式图片");
        return false;
      }
      let isLt1M = file.size / 1024 / 1024 <= 5;
      if (!isLt1M) {
        Toast("图片大小5M以内");
        return false;
      }
      return true;
    },
    //更新客户信息
    updateInfo() {
      console.log(this.info);
      this.$http.post("/car/api/updateInfo", this.info).then((res => {
        if (res.data.code === 200) {
          this.$notify({ type: 'success', message: res.data.msg });
        } else {
          this.$notify({ type: 'danger', message: res.data.msg });
        }
      }))
    },
    //选择器
    onConfirm() {

    },
    onCancel() {

    },
    onChange() {

    },
  },
}
</script>

<style scoped></style>